﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/AdministratorSite.Master" Inherits="System.Web.Mvc.ViewPage<Cs2102BookingSystem.Models.BOOKING>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	CreateBooking
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <script runat="server">
    public void printError(string error_for)
    {
        if(ViewData[error_for]!=null)
        {
            Response.Write(ViewData[error_for]);
        }
    }
        public void Page_Load()
        {
        }
    </script> 
    <script type="text/javascript">

        var day = '<%= Model.STARTDATE.Day.ToString() %>';
        var month = '<%= Model.STARTDATE.Month.ToString() %>';
        var year = '<%= Model.STARTDATE.Year.ToString() %>';
        var startRealDate = new Date(year, month - 1, day);


        var day = '<%= Model.ENDDATE.Day.ToString() %>';
        var month = '<%= Model.ENDDATE.Month.ToString() %>';
        var year = '<%= Model.ENDDATE.Year.ToString() %>';
        var endRealDate = new Date(year, month - 1, day);
        // months are 0-based!
  </script>
  <script type="text/javascript">
      $(function () {
          $("#datepicker").datepicker();
          $("#datepicker").datepicker("option", "dateFormat", "mm-dd-yy");
          $("#datepicker").datepicker("setDate", startRealDate);
          $("#datepicker1").datepicker();
          $("#datepicker1").datepicker("option", "dateFormat", "mm-dd-yy");
          $("#datepicker1").datepicker("setDate", endRealDate);
      });
  </script>
    <h2>Create Booking</h2>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
        <legend>Booking Information</legend>
        <table>
            <tr>
                <td colspan="4" style="color:Red"><% printError("ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="BOOKINGID">ID</label></td>
                <td>
                    <%: Html.TextBoxFor(model => model.BOOKINGID)%>
                </td>
                <td style="color:Red"><% printError("BOOKINGID_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="C_EMAIL">Client Email</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.C_EMAIL, 
                                            (SelectList)ViewData["client_emails"])
                    %>
                </td>
                <td style="color:Red"><% printError("C_EMAIL_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="H_NAME">Hotel</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.H_NAME, 
                                            (SelectList)ViewData["hotel_names"],
                                            new Dictionary<string, object> { { "id", "H_NAME" }, 
                                                                             { "runat", "server" }, 
                                                                             { "AutoPostBack", "true" }, 
                                                                             { "onchange", "this.form.submit()" },
                                                                             { "Enabled", "false" } })
                    %>
                </td>
                <td style="color:Red"><% printError("H_NAME_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="H_Country">Country</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.H_COUNTRY, 
                                            (SelectList)ViewData["country_names"],
                                             new Dictionary<string, object> { { "id", "H_Country" }, 
                                                                             { "runat", "server" }, 
                                                                             { "AutoPostBack", "true" }, 
                                                                             { "onchange", "this.form.submit()" } })
                    %>
                </td>
                <td style="color:Red"><% printError("H_COUNTRY_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="H_BRANCHNAME">Branch</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.H_BRANCHNAME, 
                                            (SelectList)ViewData["branch_names"],
                                             new Dictionary<string, object> { { "id", "H_BRANCHNAME" }, 
                                                                             { "runat", "server" }, 
                                                                             { "AutoPostBack", "true" }, 
                                                                             { "onchange", "this.form.submit()" } })
                    %>
                </td>
                <td style="color:Red"><% printError("H_BRANCHNAME_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="R_ROOMTYPE">Room Type</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.R_ROOMTYPE, 
                                            (SelectList)ViewData["room_types"],
                                             new Dictionary<string, object> { { "id", "R_ROOMTYPE" }, 
                                                                             { "runat", "server" }, 
                                                                             { "AutoPostBack", "true" }, 
                                                                             { "onchange", "this.form.submit()" } })
                    %>
                </td>
                <td style="color:Red"><% printError("R_ROOMTYPE_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="R_BEDTYPE">Bed Type</label></td>
                <td>
                    <%: Html.DropDownListFor(model => model.R_BEDTYPE, 
                                            (SelectList)ViewData["bed_types"],
                                             new Dictionary<string, object> { { "id", "R_BEDTYPE" }, 
                                                                             { "runat", "server" } ,
                                                                             { "AutoPostBack", "true" }, 
                                                                             { "onchange", "this.form.submit()" } })
                    %>
                </td>
                <td style="color:Red"><% printError("R_BEDTYPE_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2"><label for="NOOFROOM">Number of Room</label></td>
                <td>
                    <%: Html.TextBoxFor(model => model.NOOFROOM, 
                                        new Dictionary<string, object> { { "id", "NOOFROOM" }, 
                                                                         { "onchange", "javascript: calculateTotalPrice()" } })
                    %>
                </td>
                <td style="color:Red"><% printError("NOOFROOM_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red"></td>
                <td style="width: 150px" colspan="2"><label for="PRICEPERROOM">Price per Room</label></td>
                <td>$<a id="PRICEPERROOM"><%: Model.PRICEPERROOM %></a></td>
                <td><label for="TOTALPRICE">Total Price</label></td>
                <td>$<a id="TOTALPRICE"></a></td>
                <td style="color:Red"><% printError("PRICEPERROOM_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2">Staying From:</td>
                <td><input type="text" name="STARTDATE" id="datepicker" onchange="calculateTotalPrice()" />
                </td>
                <td style="color:Red"><% printError("STARTDATE_ERROR"); %></td>
            </tr>
            <tr>
                <td style="color:Red">*</td>
                <td style="width: 150px" colspan="2">Till:</td>
                <td><input type="text" name="ENDDATE" id="datepicker1" onchange="calculateTotalPrice()" />
                </td>
                <td style="color:Red"><% printError("ENDDATE_ERROR"); %></td>
            </tr>
            <tr style="height:50px">
                <td colspan="3" style="color:Red">* indicates required fields</td>
            </tr>
            <tr>
                <td colspan="4"><input type="submit" value="Create" name="submit1" /></td>
            </tr>
        </table>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>
    
  <script type="text/javascript">
      window.onload = calculateTotalPrice;
      function calculateTotalPrice() {
          var price_per = parseInt(PRICEPERROOM.innerHTML, 10);
          var NOOFROOM = document.getElementById("NOOFROOM");
          var number = parseInt(NOOFROOM.value);
          var startDateStr = document.getElementById("datepicker").value;
          var endDateStr = document.getElementById("datepicker1").value;

          var parts = startDateStr.split("-");
          var startDate = new Date(parts[2], parts[1] - 1, parts[0]);
          parts = endDateStr.split("-");
          var endDate = new Date(parts[2], parts[1] - 1, parts[0]);

          var millisecondsPerDay = 1000 * 60 * 60 * 24;

          var millisBetween = endDate.getTime() - startDate.getTime();
          var days = millisBetween / millisecondsPerDay;
          days = Math.floor(days);

          var total = number * price_per * days;
          TOTALPRICE.innerHTML = total.toString(10);
      }
  </script>
</asp:Content>

